<template>
  <div class="option-wrapper">
    <div class="option-main">
      <a-form
        layout="vertical"
        :model="formState"
        :rules="rules"
        @finish="handleSubmit"
      >
        <div class="option-column">
          <div class="column-title">客户信息</div>
          <div class="column-content">
            <div class="content-item">
              <a-form-item label="客户" name="custorm">
                <a-select
                  v-model:value="formState.custorm"
                  placeholder="请选择分类"
                >
                  <a-select-option value="china">China</a-select-option>
                  <a-select-option value="usa">U.S.A</a-select-option>
                </a-select>
              </a-form-item>
            </div>
            <div class="content-item">
              <a-form-item label="客户编号" name="no">
                <a-input
                  :disabled="true"
                  v-model:value="formState.no"
                  placeholder="选择客户后自动填充"
                />
              </a-form-item>
            </div>
            <div class="content-item">
              <a-form-item label="客户分类" name="class">
                <a-select
                  :disabled="true"
                  v-model:value="formState.class"
                  placeholder="选择客户后自动填充"
                >
                  <a-select-option value="china">China</a-select-option>
                  <a-select-option value="usa">U.S.A</a-select-option>
                </a-select>
              </a-form-item>
            </div>
            <div class="content-item">
              <a-form-item label="状态" name="cstatus">
                <a-select
                  :disabled="true"
                  v-model:value="formState.cstatus"
                  placeholder="选择客户后自动填充"
                >
                  <a-select-option value="china">China</a-select-option>
                  <a-select-option value="usa">U.S.A</a-select-option>
                </a-select>
              </a-form-item>
            </div>
            <div class="content-item">
              <a-form-item label="所在地区">
                <a-cascader
                  :disabled="true"
                  v-model:value="formState.zone"
                  :options="zoneoList"
                  placeholder="选择客户后自动填充"
                />
              </a-form-item>
            </div>
            <div class="content-item">
              <a-form-item label="所属经销商">
                <a-select
                  :disabled="true"
                  v-model:value="formState.dealer"
                  placeholder="选择客户后自动填充"
                >
                  <a-select-option value="china">China</a-select-option>
                  <a-select-option value="usa">U.S.A</a-select-option>
                </a-select>
              </a-form-item>
            </div>
          </div>
        </div>
        <div class="option-column">
          <div class="column-title">账号信息</div>
          <div class="column-content">
            <div class="content-item">
              <a-form-item label="姓名" name="name">
                <a-input
                  v-model:value="formState.name"
                  placeholder="请输入姓名"
                />
              </a-form-item>
            </div>
            <div class="content-item">
              <a-form-item label="账号" name="account">
                <a-input
                  v-model:value="formState.account"
                  placeholder="建议使用手机号"
                />
              </a-form-item>
            </div>
            <div class="content-item">
              <a-form-item label="启动状态" name="status">
                <a-select
                  v-model:value="formState.status"
                  placeholder="请选择分类"
                >
                  <a-select-option value="china">China</a-select-option>
                  <a-select-option value="usa">U.S.A</a-select-option>
                </a-select>
              </a-form-item>
            </div>
            <div class="content-item">
              <a-form-item label="手机" name="phone">
                <a-input
                  v-model:value="formState.phone"
                  placeholder="请输入手机号码"
                />
              </a-form-item>
            </div>
            <div class="content-item">
              <a-form-item label="初始密码" name="password">
                <a-input
                  v-model:value="formState.password"
                  placeholder="请输入手机号码"
                />
              </a-form-item>
            </div>
            <div class="content-item">
              <a-form-item label="备注" name="remark">
                <a-input
                  v-model:value="formState.remark"
                  placeholder="请输入备注"
                />
              </a-form-item>
            </div>
          </div>
        </div>
        <div class="option-footer">
          <a-button class="opt-btn" @click="resetForm">取消</a-button>
          <a-button class="opt-btn" type="primary" htmlType="submit"
            >保存</a-button
          >
        </div>
      </a-form>
    </div>
  </div>
</template>
<script setup>
import { ref, computed } from "vue";
import router from "@/routers";
const formState = ref({
  name: "",
  account: "",
  status: [],
  custorm: [],
  no: "",
  class: [],
  cstatus: [],
  zone: [],
  phone: "",
  dealer: [],
  password: "",
  remark: "",
});
const rules = ref({
  name: [
    {
      required: true,
      message: "请输入姓名",
      trigger: "blur",
    },
  ],
  account: [
    {
      required: true,
      message: "请输入账号",
      trigger: "change",
    },
  ],
  custorm: [
    {
      required: true,
      message: "请选择经销商",
      trigger: "blur",
    },
  ],
  password: [
    {
      required: true,
      message: "请输入密码",
      trigger: "blur",
    },
  ],
});
const zoneoList = [
  {
    value: "zhejiang",
    label: "浙江",
    children: [
      {
        value: "hangzhou",
        label: "杭州",
        children: [
          {
            value: "xihu",
            label: "西湖",
          },
        ],
      },
    ],
  },
  {
    value: "jiangsu",
    label: "Jiangsu",
    children: [
      {
        value: "nanjing",
        label: "Nanjing",
        children: [
          {
            value: "zhonghuamen",
            label: "Zhong Hua Men",
          },
        ],
      },
    ],
  },
];
const handleSubmit = (values) => {
  console.log(values);
};
const resetForm = () => {
  formState.value = {};
  router.go(-1);
};
</script>

